<template>
	<div class="home">
		<!-- <el-row> -->
		<!-- <el-col :span="24"> -->
		<div id="box" ref="box"></div>
		<!-- </el-col> -->
		<!-- <el-col :span="6">
				<div>123</div>
			</el-col>
			<el-col :span="6">
				<div>123</div>
			</el-col>
			<el-col :span="6">
				<div>123</div>
			</el-col> -->
		<!-- </el-row> -->
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';
let box = ref(null);
onMounted(async () => {
	let myecharts = echarts.init(box.value, null, {
		renderer: 'canvas',
		useDirtyRect: false,
	});
	let app = reactive({});
	const posList = [
		'left',
		'right',
		'top',
		'bottom',
		'inside',
		'insideTop',
		'insideLeft',
		'insideRight',
		'insideBottom',
		'insideTopLeft',
		'insideTopRight',
		'insideBottomLeft',
		'insideBottomRight',
	];
	app.configParameters = {
		rotate: {
			min: -90,
			max: 90,
		},
		align: {
			options: {
				left: 'left',
				center: 'center',
				right: 'right',
			},
		},
		verticalAlign: {
			options: {
				top: 'top',
				middle: 'middle',
				bottom: 'bottom',
			},
		},
		position: {
			options: posList.reduce(function (map, pos) {
				map[pos] = pos;
				return map;
			}, {}),
		},
		distance: {
			min: 0,
			max: 100,
		},
	};
	app.config = {
		rotate: 90,
		align: 'left',
		verticalAlign: 'middle',
		position: 'insideBottom',
		distance: 15,
		onChange: function () {
			const labelOption = {
				rotate: app.value.config.rotate,
				align: app.value.config.align,
				verticalAlign: app.value.config.verticalAlign,
				position: app.value.config.position,
				distance: app.value.config.distance,
			};
			myecharts.setOption({
				series: [
					{
						label: labelOption,
					},
					{
						label: labelOption,
					},
					{
						label: labelOption,
					},
					{
						label: labelOption,
					},
				],
			});
		},
	};
	const labelOption = {
		show: true,
		position: app.config.position,
		distance: app.config.distance,
		align: app.config.align,
		verticalAlign: app.config.verticalAlign,
		rotate: app.config.rotate,
		formatter: '{c}  {name|{a}}',
		fontSize: 16,
		rich: {
			name: {},
		},
	};
	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		legend: {
			data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
		},
		toolbox: {
			show: true,
			orient: 'vertical',
			left: 'right',
			top: 'center',
			feature: {
				mark: { show: true },
				dataView: { show: true, readOnly: false },
				magicType: { show: true, type: ['line', 'bar', 'stack'] },
				restore: { show: true },
				saveAsImage: { show: true },
			},
		},
		xAxis: [
			{
				type: 'category',
				axisTick: { show: false },
				data: ['2012', '2013', '2014', '2015', '2016'],
			},
		],
		yAxis: [
			{
				type: 'value',
			},
		],
		series: [
			{
				name: 'Forest',
				type: 'bar',
				barGap: 0,
				label: labelOption,
				emphasis: {
					focus: 'series',
				},
				data: [320, 332, 301, 334, 390],
			},
			{
				name: 'Steppe',
				type: 'bar',
				label: labelOption,
				emphasis: {
					focus: 'series',
				},
				data: [220, 182, 191, 234, 290],
			},
			{
				name: 'Desert',
				type: 'bar',
				label: labelOption,
				emphasis: {
					focus: 'series',
				},
				data: [150, 232, 201, 154, 190],
			},
			{
				name: 'Wetland',
				type: 'bar',
				label: labelOption,
				emphasis: {
					focus: 'series',
				},
				data: [98, 77, 101, 99, 40],
			},
		],
	};

	myecharts.setOption(option);
	window.onresize = function () {
		// echarts适配
		myecharts.resize();
	};
});
</script>

<style lang="scss" scoped>
#box {
	width: 1000px;
	height: 600px;
}
</style>
